<template>
  <TabBar></TabBar>
  <van-nav-bar title="报告路况" left-text="返回" left-arrow @click-left="onClickLeft" />
  <!-- 表单 -->
  <van-form @submit="handleSubmit">
    <van-cell-group inset>
      <!-- 1.事件类型 -->
      <van-field
        v-model="event.event_type"
        is-link
        readonly
        label="事件类型"
        name="event_type"
        placeholder="请选择事件类型"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker :columns="columns" @cancel="showPicker = false" @confirm="typeConfirm" />
      </van-popup>
      <!-- 2.事件地址 -->
      <van-field
        v-model="event.event_address"
        is-link
        readonly
        name="event_address"
        label="事件地址"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model:show="showArea" position="bottom">
        <van-area :area-list="areaList" @confirm="addressConfirm" @cancel="showArea = false" />
      </van-popup>
      <!-- 3. 图片上传-->
      <van-field name="picture" label="图片上传">
        <template #input>
          <van-uploader v-model="picture" />
        </template>
      </van-field>
      <!-- 5.事件描述 -->
      <van-field
        v-model="event.event_describe"
        rows="2"
        autosize
        label="事件描述"
        name="event_describe"
        type="textarea"
        maxlength="50"
        placeholder="请输入事故的具体地址"
        show-word-limit
      />
    </van-cell-group>
    <!-- 按钮 -->
    <div class="btn">
      <van-button type="primary" @click="handleSubmit"> 确认 </van-button>
      <van-button plain type="primary" style="margin-left: 10px"> 取消 </van-button>
    </div>
  </van-form>
</template>

<script setup>
import TabBar from '@/Components/TabBar/TabBar.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { areaList } from '@vant/area-data'
import { useReports } from './useReport'
const { handleSubmit, event } = useReports()
// 顶部导航条
const $router = useRouter()
const onClickLeft = () => $router.push('/home')
// 事件类型
const columns = [
  { text: '翻车', value: 0 },
  { text: '刮蹭', value: 1 },
  { text: '碾压', value: 2 },
  { text: '碰撞', value: 3 },
  { text: '失火', value: 4 },
  { text: '其他', value: 5 }
]
const showPicker = ref(false)
const typeConfirm = ({ selectedOptions }) => {
  showPicker.value = false
  event.value.event_type = selectedOptions[0].text
}
// 事件地址
const showArea = ref(false)
const addressConfirm = ({ selectedOptions }) => {
  showArea.value = false
  event.value.event_address = selectedOptions.map((item) => item.text).join('/')
}
// 图片上传
const picture = ref([])
</script>

<style scoped>
.btn {
  position: absolute;
  right: 0;
  margin: 10px;
}
</style>
